<template>
	<view>
		<u-navbar title="用户登录" :autoBack="true"/>
		<u-toast ref="uToast" />
		<view class="p-5">
			<view class="mt-3 text-xxl"> 欢迎使用
				<text class="text-bolder text-red"> 学创校园 </text>
			</view>
			<view class="mt-2 text-16"></view>
			<image class="img mt-5" src="https://cdn.cuuo.cn/images/login-bg.png" mode="aspectFit" />
			<view class="mt-2">
				<view class="p-5">
					<view class="mt-2">
						<u-button
							type="success"
							text="微信登录"
							icon="weixin-fill"
							color="linear-gradient(45deg, #5ae386, #3eca7d)"
							:loading="loading"
							:disabled="disabled" 
							@click="login"
						>
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/api'
export default {
	data() {
		return {
			loading: false,
			disabled: false,
		};
	},
	onLoad(options) {

	},
	methods: {
		// 登录
		login() {
			this.loading = true;
			this.disabled = true;
			uni.login({
				provider: 'weixin',
				success: async (res) => {
					const { code, data, message } = await login({ code: res.code });
					if (code !== 1000) {
						this.loading = false;
						this.disabled = false;
						return this.$refs.uToast.show({
							type: 'error',
							message: message
						});
					}
					this.$store.commit('MLOGIN', data);
					this.loading = false;
					this.disabled = false;
					this.$refs.uToast.show({
						type: 'success',
						message: message,
						duration: 1500,
						complete() {
							uni.navigateBack();
						}
					});
				}
			});
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.img {
	display: inline-table;
	width: 750rpx;
	height: 550rpx;
}

.radius {
	border-radius: 18rpx !important;
}
</style>
